<script setup lang="ts">
import { reactive, ref  } from 'vue';
  const msg = 'hello world'
  const count = 10
  const price = 2.5
  const isMarry:boolean = false
  const money = 0
  const age=20
  const skills = '写代码'
  const getContent = ()=>{
    return "吃喝拉撒睡"
  }
  // 定义一个点击的函数
const clickFn = (a: number,b: number,c: number) => {
  alert("点我干嘛" + a)
}
const changeValue = (event: Event) => {
  const obj = event.target as HTMLInputElement
  console.log("值改变了", obj.value)
}
// 键盘事件对象 取自MDN-官方的W3c的标准文档
const enterClick = (event:KeyboardEvent) => {
  if(event.key === "Enter") {
    alert("您点击了回车")
  }
}

// 改变性别
const changeSex = ()=>{
  person.sex = '女'
}
const person = reactive<{
  name:string,
  age:number,
  sex:"男"|"女"
}>({
  name:"张三",
  age:24,
  sex:"男"
})

// ref声明 简单或复杂数据类型
const isMarried = ref(false)
const seperate = ()=>{
  isMarried.value = false
}

const people = ref<{name: string, height: number, weight: number, money: number, childCount: number}>({
  name: '高大帅',
  height: 185,
  weight: 80,
  money: 9999999,
  childCount: 10
})
const groupPeople=()=>{
  people.value.money-=100000
  people.value.childCount += 1
  people.value.weight += 10
  people.value.height -= 2
}

const weather = ref('多云')
const feeling = ref(`<h2 style="color:blue">我的心情跌落到谷底-我emo了</h2>`)
const changeFace = ()=>{
  feeling.value = `<h1 style="color:red">我怒了😡</h1>`
}
</script>

<template>
  
  <div class="container">
    {{ (msg+'vue3').split('').reverse().join('') }}
    <p>总价：{{ count*price }}</p>
    <p>年龄：{{ `${age}岁` }}</p>
    <p>婚姻状态：{{ isMarry?"已婚":"未婚" }}</p>
    <p>存款状态：{{ money||"穷光蛋" }}</p>
    <p>技能：{{ skills }}</p>
    <p>函数调用：{{ getContent() }}</p>
    <p>{{ 1+3 }}</p>
    <button v-on:click="clickFn(1,2,3)">测试</button>
   <!-- 完整写法v-on:事件名="方法名" -->
   <!-- 语法糖的写法 @click -->
   <button @click="clickFn(1,2,3)">测试</button>
   <!-- change/input -->
   <input type="text" @change="changeValue" @keydown="enterClick" >
   <h1>响应式数据Reactive</h1>
    <p>姓名：{{ person.name }}</p>
    <p>年龄：{{ person.age }}</p>
    <p>性别:{{ person.sex }}</p>
    <button @click="person.sex='女'">变性</button>
    <button @click="changeSex">变性</button>

    <h1>Ref响应式数据-简单数据类型</h1>
    <p>婚姻状态：{{ isMarried?"已婚":"未婚" }}</p>
    <button @click="isMarried = true">成家</button>
    <button @click="seperate">出家</button>

    <h1>Ref响应式数据-复杂数据类型</h1>
    <p>姓名：{{ people.name }}</p>
    <p>身高{{ people.height }}cm</p>
    <p>体重{{ people.weight }}kg</p>
    <p>财产：{{ people.money }}$</p>
    <p>儿女个数：{{ people.childCount }}个</p>
    <button @click="groupPeople">成长</button>

    <h1>v-text和v-html指令</h1>
    <div v-text="weather"></div>
    <div v-html="feeling"></div>
    <button @click="weather='下冰雹了'">变天了</button>
    <button @click="changeFace">变脸</button>
  </div>
</template>

<style scoped>
.container {
  font-size: 30px;
  font-weight: bolder;
  color: brown
}
</style>
